<template>
    <div class="w">
        <div class="container">
            <!-- 排序和分类筛选 -->
            <div class="filter" >
                <el-form :inline="true">
                    <el-form-item  label="类型：">
                       <select v-model="roomType" >
                        <option value="">无</option>
                        <option value="classroom">教室型</option>
                        <option value="round_table">圆桌型</option>
                       </select>
                    </el-form-item>
                    <el-form-item label="价格：">
                        <select v-model="sortType" >
                            <option value="">无</option>
                            <option value="des">从高到低</option>
                            <option value="asc">从低到高</option>
                        </select>
                    </el-form-item>
                    <el-form-item label="参会人数：">
                        <el-input style="width: 100px;" v-model="attendeeCount" clearable></el-input>
                    </el-form-item>
                </el-form>
                <el-form :inline="true">
                    <el-form-item label="开始时间：">
                        <el-date-picker
                            v-model="startTime"
                            type="datetime"
                            placeholder="请选择开始时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </el-form-item>
                    <el-form-item label="结束时间：">
                        <el-date-picker
                            v-model="endTime"
                            type="datetime"
                            placeholder="请选择开始时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </el-form-item>
                </el-form>
                <el-form label-width="90px">
                    <el-form-item label="网络：">
                        <el-radio-group v-model="hasNetword">
                         <el-radio :value="1">有</el-radio>
                         <el-radio :value="0">无</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="音响设施：">
                        <el-radio-group v-model="hasSpeaker">
                         <el-radio :value="1">有</el-radio>
                         <el-radio :value="0">无</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="投影仪：">
                        <el-radio-group v-model="hasProjector">
                         <el-radio :value="1">有</el-radio>
                         <el-radio :value="0">无</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <button class="submitB" @click="filterItems">筛选</button>
            </div>
            <div v-for="item in displayedItems" :key="item.id" class="item" @click="gotoDetail(item.id)">
                <img :src="item.firstImageUrl" alt="Room Item" class="item-image">
                <div class="item-info">
                    <h2 class="item-title">{{ item.name }}</h2>
                    <p class="item-description">类型：{{ item.type==='classroom' ? '教室型' : '圆桌型' }}</p>
                    <p class="item-description">容纳人数：{{ item.capacity }}   人</p>
                    <p class="item-description">价格：{{ item.pricePerHour }}   元/小时</p>
                    <p class="item-description">面积：{{ item.area }}   ㎡</p>
                </div>
                <div>
                    <button class="order-button" @click.stop="openDialog(item.id)">预定</button>
                </div>
            </div>
            <!-- 分页组件 -->
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="totalCount"
            ></el-pagination>
        </div>  
        <el-dialog v-model="dialogVisible" title="请填写需求">
            <el-form :model="orderForm" label-width="120px">
            <el-form-item label="参会人数">
                <el-input v-model="orderForm.attendeeCount" />
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker
                    v-model="orderForm.startTime"
                    type="datetime"
                    placeholder="请选择开始时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker
                v-model="orderForm.endTime"
                type="datetime"
                placeholder="请选择开始时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                />
            </el-form-item>
            </el-form>
            <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleOrder()">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
import { ElMessageBox } from 'element-plus';
export default {
    data() {
        return {
            RoomItems:[],
            displayedItems: [],
            currentPage: 1,
            pageSize: 10,
            totalCount: 0,
            roomType:'',
            attendeeCount:undefined,
            startTime:'',
            endTime:'',
            hasNetword:'',
            hasProjector:'',
            hasSpeaker:'',
            sortType:'',
            dialogVisible:false,
            orderForm:{},
            roomId:'',
        };
    },
    mounted() {
        this.fetchItems();
    },
    methods: {
        fetchItems() {
            axios.get('customer/room/page', {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    keyword:this.$route.query.keyword
                }
            })
           .then(res => {
                if (res.data.code === 200) {
                    this.RoomItems = res.data.data.records;
                    this.totalCount = res.data.data.total;
                    this.displayedItems=this.RoomItems;
                } else {
                    this.$message.error(res.data.msg || '获取失物数据列表失败！');
                }   
            });
        },
        filterItems() {
            console.log(this.startTime );
            
            this.formatTime(this.startTime);
            this.formatTime(this.endTime);
            axios.get('customer/room/page', {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    type:this.roomType,
                    attendeeCount:this.attendeeCount,
                    hasNetword:this.hasNetword,
                    hasProjector:this.hasProjector,
                    hasSpeaker:this.hasSpeaker,
                    startTime:this.startTime,
                    endTime:this.endTime,
                }
            })
           .then(res => {
                if (res.data.code === 200) {
                    this.displayedItems = res.data.data.records;
                    this.totalCount = res.data.data.total;
                    
                } else {
                    this.$message.error(res.data.msg || '获取失物数据列表失败！');
                }   
            });
        },
        handleCurrentChange(page) {
            this.currentPage = page;
            this.fetchItems();
        },
        gotoDetail(id) {
            let token = localStorage.getItem('token');
            if (!token) {
                ElMessageBox({
                    message: '您尚未登录，是否前往登录？',
                    type: 'warning',
                    confirmButtonText: '去登录',
                    cancelButtonText: '取消',
                    showCancelButton: true
                }).then(() => {
                    // 点击“去登录”按钮后的操作，这里假设登录页面路径为 '/login'
                    this.$router.push('/customerlogin');
                }).catch(() => {
                    // 点击“取消”按钮后的操作，这里什么都不做
                });
                return;
            }
            this.$router.push({
                path: '/user/detailpage',
                query: {
                    id: id
                }
            });
        },
        sortItems() {
            this.displayedItems.sort((a, b) => {
                if (this.sortType === 'asc') {
                    return a.pricePerHour-b.pricePerHour;
                } else if(this.sortType==='des'){
                    return b.pricePerHour-a.pricePerHour;
                }
            });
        },
        formatTime(time){
          return time.replace('T',' ');
        },
        openDialog(id){
            let token = localStorage.getItem('token');
            if (!token) {
                ElMessageBox({
                    message: '您尚未登录，是否前往登录？',
                    type: 'warning',
                    confirmButtonText: '去登录',
                    cancelButtonText: '取消',
                    showCancelButton: true
                }).then(() => {
                    // 点击“去登录”按钮后的操作，这里假设登录页面路径为 '/login'
                    this.$router.push('/customerlogin');
                }).catch(() => {
                    // 点击“取消”按钮后的操作，这里什么都不做
                });
                return;
            }
            this.dialogVisible=true;
            this.roomId=id;
        },
        handleOrder(){
            this.orderForm.roomId=this.roomId;
            axios.post('/customer/reservation',this.orderForm).then(res=>{
            if(res.data.code===200){
            this.dialogVisible=false;
            this.$router.push({
                path: '/user/orderdetailpage',
                query: {
                    id: res.data.data
                }
            });
            }else {
            this.$message.error(res.data.msg||'预订失败！')
            }
         })
        }
    }
};
</script>

<style scoped>
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.item {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.item-image {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 16px;
}

.item-info {
    flex: 1;
    text-align: left;
}

.item-title {
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 8px;
}

.item-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
}

.item-create-time {
    font-size: 12px;
    color: #999;
}

.filter {
    margin-bottom: 20px;
    text-align: left
}

.filter select {
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.submitB {
    width: 100px;
    height: 50px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background-color: #2a871c;
    border-radius: 10px;
}
.submitB:hover {
    transform: scale(1.05);
    background-color: #339b23;
}
.order-button {
    width: 80px;
    height: 40px;
    background-color: #2a871c;;
    color: #fff;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
}
.order-button:hover {
    transform: scale(1.05);
}
</style>    